<template>
	<view class="uni_content">
		<tn-nav-bar fixed :backTitle="backTitle" :beforeBack="backClick">星族圈</tn-nav-bar>
		<view class="content xingzu_padding" :style="{paddingTop: vuex_custom_bar_height + 5 + 'px'}">
			<u--input placeholder="搜索星族圈素材关键词" v-model="search" @input="changeSearch" prefixIcon="search" prefixIconStyle="font-size: 22px;color: #808080;" class="search"></u--input>
			<u-tabs :list="tabsList"  lineWidth="10" lineHeight="5" :current="current"
				:activeStyle="{color: '#FE0000'}"
				:inactiveStyle="{color: '#939496'}"
				 @change="tabChange"
				:lineColor="`url('/pages/users/static/xingzu/tabs.png') 100% 100%`">
				<view slot="right" style="padding-left: 4px;" @tap="handleSlot">
					<!-- <u-icon name="list" size="21" bold></u-icon> -->
					<u--image :showLoading="true" :src="tabsMore" width="17px" height="15px"></u--image>
				</view>
			</u-tabs>
			<view class="eject" v-show="isShow">
				<view class="eject_box" ref="eject" v-for="(item, index) in tabsList" :key="index" @click="handledTabs(item, index)">{{ item.name }}</view>
			</view>
		</view>
		<xingzuList :name="selectName" :title="searchTitle" />
	</view>
</template>

<script>
import xingzuList from './components/xingzuList.vue'
import { getIndexList } from '@/pages/users/xingzu/config/api.js'

export default {
	components: {
		xingzuList
	},
	data() {
		return {
			backTitle: '',
			selectName: null,
			search: '',
			current: 0,
			isShow: false,
			tabsMore: require('@/pages/users/static/xingzu/more.png'),
			tabsList: [],
			timer: null,
			searchTitle: ''
		}
	},
	mounted() {
		this.getList()
	},
	methods: {
		getList() {
			getIndexList().then(res => {
				this.tabsList = res.data
				this.selectName = this.tabsList[0].id
			})
		},
		handleSlot() {
			this.isShow = !this.isShow
		},
		tabChange(e) {
			this.selectName = e.id
			this.isShow = false
		},
		handledTabs(e, index) {
			this.selectName = e.id
			this.isShow = false
			this.current = index
		},
		backClick() {
			uni.navigateBack({
				delta: 1,
				success: () => {
					uni.setStorageSync('currentIndex', 0)
				}
			})
		},
		changeSearch(e) {
			clearTimeout(this.timer)
			this.timer = setTimeout(() => {
				this.searchTitle = e
			}, 500)
		},
	}
}
</script>

<style scoped>
.uni_content {
	margin-top: -50px;
	padding-bottom: calc(var(--window-bottom) + 50px);
}
.content {
	background-color: #FFFFFF;
}
.xingzu_padding {
	padding: 4px 16px;
}
.search {
	background-color: #F2F2F2;
	border: none;
}
.title_color {
	color: #1A1A1A;
}
.content_color {
	color: #808080;
}
.eject {
	width: 35%;
	background-color: #FFFFFF;
	float: right;
	position: absolute;
	right: 16px;
	z-index: 10;
	text-align: center;
	box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.5);
	color: #1A1A1A;
}
.eject_box {
	padding: 8px 0;
}
.eject_box:not(:last-child) {
	border-bottom: 0.5px solid #EEEEEE;
}
</style>
